<div role="tab" [attr.aria-expanded]="apesActive" class="{{prefixCls}}-header" (click)="clickHeader()">
  <ng-container *ngIf="apesShowArrow">
    <ng-container *apesStringTemplateOutlet="apesExpandedIcon">
      <i apes-icon [apesType]="apesExpandedIcon || 'right'" class="{{prefixCls}}-arrow" [apesRotate]="apesActive ? 90 : 0"></i>
    </ng-container>
  </ng-container>
  <ng-container *apesStringTemplateOutlet="apesHeader">{{ apesHeader }}</ng-container>
  <div class="{{prefixCls}}-extra" *ngIf="apesExtra">
    <ng-container *apesStringTemplateOutlet="apesExtra">{{ apesExtra }}</ng-container>
  </div>
</div>
<div class="ant-collapse-content"
     [class.apes-collapse-content-active]="apesActive"
     [@collapseMotion]="apesActive ? 'expanded' : 'hidden' ">
  <div class="{{prefixCls}}-content-box">
    <ng-content></ng-content>
  </div>
</div>
